import 'css/common.css'
import './search.css'

import Vue from 'vue'
import axios from 'axios'
import url from 'js/api.js'
import mixin from 'js/mixin.js'
import qs from 'qs'
import Velocity from 'velocity-animate'

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

let {keyword, id} = qs.parse(location.search.substr(1));
let app = new Vue({
  el: '#app',
  data: {
    searchList: null,
    keyword: keyword,
    goTopShow: false,
    pageNum: 0,
    loading: false
  },
  created(){
    this.getSearchList();
  },
  methods: {
    getSearchList(){
      if(this.pageNum >= 5){
        this.loading = true;
        return
      }
      axios.get(url.searchList, {
        params: {
          keyword,
          id
        }
      }).then((res)=>{
        if(this.searchList){
          this.searchList = this.searchList.concat(res.data.lists)
        }else {
          this.searchList = res.data.lists
        }
        this.loading = false
        this.pageNum++;
      })
    },
    move(){
      if(this.$refs.content.getBoundingClientRect().top <= -60){
        this.goTopShow = true
      }else {
        this.goTopShow = false
      }
    },
    goTop(){
      Velocity(document.body, 'scroll', {
        duration: 300
      })
      this.goTopShow = false
    }
  },
  mixins: [mixin]
});
